<template>
  <div>
    <el-button type="primary" @click="submit">提交</el-button>
    <avue-form ref="yearMonthForm"  v-model="formData" :option="formOption">
    </avue-form>
    <el-button @click="searchHandle">搜索</el-button>
    <el-form :model="formData">
      <el-table :data="filteredData" ref="table" height="300px" @scroll.native="handleScroll" :summary-method="getSummaries" show-summary>
        <el-table-column type="index" width="50" label="序号" fixed align="center">
          <template scope="scope">
            <span>{{( currentPage - 1 ) * pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
<!--        <el-table-column label='序号' prop="index"></el-table-column>-->
        <el-table-column label="数字填写" prop="num">
          <template v-slot="scope" >
            <el-form-item :prop="`fillTableData.${scope.$index}.num`">
              <el-input-number v-if="scope.row.$cell" :controls="false" v-model.trim="scope.row.num" placeholder="请输入"></el-input-number>
              <span v-else>{{scope.row.num}}</span>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label='项目名称' prop="projectName"></el-table-column>
        <el-table-column label='操作' prop="">
          <template v-slot="scope" >
            <el-button @click="edit(scope.row,scope.$index)">编辑</el-button>
            <el-button @click="save(scope.row,scope.$index)">保存</el-button>
            <el-button @click="cancel(scope.row,scope.$index)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="allListData.length">
      </el-pagination>
    </el-form>
  </div>
</template>

<script>


export default {
  created () {
    this.fetchData()
  },
  computed: {
    // filteredData() {
    //   const search = this.formData.projectName //this.search.toLowerCase();
    //   return this.formData.fillTableData.filter((data) => {
    //     console.log("********")
    //     return data.projectName.includes(search)
    //   })
    //   //this.doLayout() ;
    // },
  },
  watch:{
    // 'formData.search':{
    //   handler(newVal, oldVal) {
    //     console.log("newVal:",newVal)
    //     const search = this.formData.projectName //this.search.toLowerCase();
    //     this.filteredData =  this.formData.fillTableData.filter((data) => {
    //       console.log("********")
    //       return data.projectName.includes(search)
    //     })
    //   },
    //   deep:true,
    //   immediate:true
    // }
  },
  mounted() {
    //this.lazyLoading();
  },
  data () {
    return {
      formOption: {
        labelWidth: 50,
        menuBtn: true,
        span: 6,
        menuSpan: 6,
        menuPosition: "left",
        emptyBtn: false,
        submitBtn: false,
        column: [
          {
            label: "项目名称",
            prop: "projectName",
            labelWidth: 80,
            slot: true,
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择项目名称",
            //     trigger: "change",
            //   },
            // ],
          },
        ],
      },
      formData:{fillTableData:[],filteredData:[]},
      filteredData:[],
      allListData:[],
      search:'',
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示数量
    }
  },
  methods: {
    lazyLoading(){
      let dom = document.querySelector(".el-table__body-wrapper");
      dom.addEventListener("scroll", (v) => {
        const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
        console.log("鼠标滑动-scrollDistance",scrollDistance)

        this.allListData =  this.formData.fillTableData.filter((data) => {
          return !this.formData.projectName || data.projectName.includes(this.formData.projectName)
        })
        this.filteredData = [...this.filteredData,...this.allListData.slice((this.currentPage-1)*this.pageSize,this.currentPage * this.pageSize)]  ;

      });
    },
    fetchData(){
      this.data = [] ;
      for(let i =  0 ; i < 100 ; i++){
        this.data.push({id:i,index:i,num:undefined,projectName:'项目'+i,$cell:false})
      }
      this.formData.fillTableData = this.data
      this.onLoad() ;
    },
    onLoad(){
      this.allListData =  this.formData.fillTableData.filter((data) => {
        return !this.formData.projectName || data.projectName.includes(this.formData.projectName)
      })
      this.filteredData = this.allListData.slice((this.currentPage-1)*this.pageSize,this.currentPage * this.pageSize) ;
    },
    searchHandle(){
      this.currentPage = 1 ;
      this.pageSize = 10 ;
      this.onLoad() ;
      // this.allListData =  this.formData.fillTableData.filter((data) => {
      //   return !this.formData.projectName ||  data.projectName.includes(this.formData.projectName)
      // })
      // this.filteredData = this.allListData.slice((this.currentPage-1)*this.pageSize,this.currentPage * this.pageSize) ;
    },
    //pageSize改变时触发的事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1; //始终保持第一页
      this.pageSize = val; //将改变的值赋给pageSize
      this.onLoad() ;
    },
//当前页码发生改变时触发的事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val; //改变当前页码
      this.onLoad() ;
    },
    submit(){
      console.log("this.formData.fillTableData:",this.formData.fillTableData)
    },
    handleScroll(){
      console.log("***********")
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计"
          return
        }
        console.log("data:",data)
        const values = this.formData.fillTableData.filter((f) => f.transportationEngineer != "合计").map((item) => Number(item[column.property]))
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        }
      })
      return sums
    },
    edit(row,index){
      row.num = 12
      this.$set(row,'$cell',true)
      console.log("row:",row,'index:',index)
    },
    save(row,index){
      this.$set(row,'$cell',false)
    },
    cancel(row,index){

    }
  },
}
</script>

<style lang='less' scoped>
</style>